[#ftl]

[@define "agile.MessageDialog" "Dialog" "Dialog=dijit/Dialog,Button=dijit/form/Button"]
	title:"Beyond Prototype "+agile.i18n("Message")
	[#assign messageTemplateString]
	<div style="height:75px;margin:4px;">
		<div class="message">{this_message}</div>
		<div class="processing_msg">{i18n_msg_processing}</div>
	</div>	
	<div style="position:absolute;left:35%">
		<button class="button okButton" [#--data-dojo-type="dijit.form.Button"--] type="button">{i18n_msg_ok}</button>
		<button class="button cancelButton" [#--data-dojo-type="dijit.form.Button"--] type="button">{i18n_msg_cancel}</button>				
	</div>	
	[/#assign]
	,messageTemplateString:"${messageTemplateString?js_string}"
	,startup:function(){
		this.inherited(arguments);
//		this.containerNode.innerHTML = lang.replace(this.messageTemplateString,agile.i18nValues(this.messageTemplateString,{}));
//		this.messageNode = query(".message",this.containerNode)[0];
//		this.processingMsgNode = query(".processing_msg",this.containerNode)[0];
//		this.okButton = query(".okButton",this.containerNode)[0];
//		this.cancelButton = query(".cancelButton",this.containerNode)[0];
		
		style.set(this.closeButtonNode, "visibility", "hidden");
		this.subscribe("agile.message",function(type,id,message,exception,context,callback){
			
			console.warn("@Deprecated, please use specific topic agile.message.xxxx");
			
			if(message.indexOf("i18n_") == 0){
				message = agile.i18n(message.substring(5),null,true);
			}
						
			this.containerNode.innerHTML = lang.replace(this.messageTemplateString,agile.i18nValues(this.messageTemplateString,{type:type,message:message}));
			var messageNode = query(".message",this.containerNode)[0];
			var processingMsgNode = query(".processing_msg",this.containerNode)[0];
			var okButton = query(".okButton",this.containerNode)[0];
			var cancelButton = query(".cancelButton",this.containerNode)[0];

			if(type == "error" || type == "fatal"){
				style.set(messageNode,{color:"red"});
//				if(typeof exception == "Error"){//TODO
					console.error("["+locale.format(new Date(),{formatLength:"medium",selector:"date",datePattern:"yyyy-MM-dd HH:mm:ss"})+"]",message,exception);
//				}
			}
			
			style.set(messageNode,{display:"inline"});
			style.set(processingMsgNode,"display","none");
			style.set(okButton,"display","inline");
			style.set(cancelButton,"display","none");
						
			aspect.after(okButton, "onclick",lang.hitch(this,function(){				
				//this.disconnect(handle);
				if(callback){
					callback.ok.apply(context);
				}
				this.hide();
			}));
			
			this.show();	
		});	
		
		this.subscribe("agile.message.error",function(message){
			[#assign errorMessageTemplate][#compress]
			<center>
			<div style="height:80px;margin:4px;color:red;font-size:1em">
				{message}
			</div>	
			<div class="buttonDiv">
				<center>
					<button class="button okButton" type="button">{ok}</button>
				</center>
			</div>	
			</center>
			[/#compress][/#assign]
			
			this.containerNode.innerHTML = lang.replace('${errorMessageTemplate?js_string}',{message:message,ok:agile.i18n("msg_ok",null,"OK")});
			
			var dialog = this;
			query(".okButton",this.containerNode).on("click",function(){
				dialog.hide();
			});
			
			this.show();	
		});
		
		this.subscribe("agile.message.info",function(message){
			[#assign infoMessageTemplate][#compress]
			<center>
			<div style="height:80px;margin:4px;font-size:1em">
				{message}
			</div>	
			<div class="buttonDiv">
				<center>
					<button class="button okButton" type="button">{ok}</button>
				</center>
			</div>	
			</center>
			[/#compress][/#assign]
			
			this.containerNode.innerHTML = lang.replace('${infoMessageTemplate?js_string}',{message:message,ok:agile.i18n("msg_ok",null,"OK")});
			
			var dialog = this;
			query(".okButton",this.containerNode).on("click",function(){
				dialog.hide();
			});
			
			this.show();	
		});
		
		this.subscribe("agile.message.confirm",function(message,parameters,context,callback){
			
			[#assign confirmMessageTemplate][#compress]
			<center>
			<div style="height:80px;margin:4px;font-size:1em" class="message">
				{message}
			</div>	
			<div class="buttonDiv">
				<center>
				<button class="button okButton" type="button">{ok}</button>
				<button class="button cancelButton" type="button">{cancel}</button>
				</center>
			</div>	
			</center>
			[/#compress][/#assign]
			
			if(message.indexOf("i18n_") == 0){
				message = agile.i18n(message.substring(5),null,true);
			}			
			
			this.containerNode.innerHTML = lang.replace('${confirmMessageTemplate?js_string}',{
				message:message
				,ok:agile.i18n("msg_ok",null,"OK")
				,cancel:agile.i18n("msg_cancel",null,"Cancel")
			});
			
			var dialog = this;
			 query(".okButton",this.containerNode).on("click",function(){
				//hide buttons 
				query(".buttonDiv",this.containerNode).style({"display":"none"});
				//show processing message
				query(".message",this.containerNode).forEach(function(node){
					node.innerHTML = agile.i18n("msg_processing",null,"Being processed,please wait...");
				});
				
				 window.setTimeout(function(){
						if(callback){
							try{
								callback.ok.apply(context);
							}catch(e){
								console.error("failed to execute callback",e);
							}
						}
						dialog.hide();
					},100);
			 });
			 
			 query(".cancelButton",this.containerNode).on("click",function(){
				 window.setTimeout(function(){
						if(callback){
							try{
								callback.cancel.apply(context);
							}catch(e){
								console.error("failed to execute callback",e);
							}
						}
						dialog.hide();
					},100);
			 });
			 
			 this.show();	
[#--			 
//			this.containerNode.innerHTML = lang.replace(this.messageTemplateString,agile.i18nValues(this.messageTemplateString,{type:"confirm",message:message}));
//						
//			var messageNode = query(".message",this.containerNode)[0];
//			var processingMsgNode = query(".processing_msg",this.containerNode)[0];
//			var okButton = query(".okButton",this.containerNode)[0];
//			var cancelButton = query(".cancelButton",this.containerNode)[0];
			
//			style.set(messageNode,{display:"inline",color:"blue"});
//			style.set(processingMsgNode,"display","none");
//			style.set(okButton,"display","inline");
//			style.set(cancelButton,"display","inline");
			
//			var dialog = this;
//			aspect.after(okButton, "onclick", function(){
//				style.set(okButton,"display","none");
//				style.set(cancelButton,"display","none");	
//				style.set(messageNode,"display","none");
//				style.set(processingMsgNode,"display","inline");
//				window.setTimeout(function(){
//					if(callback){
//						try{
//							callback.ok.apply(context);
//						}catch(e){
//							console.error("failed to execute callback",e);
//						}
//					}
//					dialog.hide();
//				},200);
//			});
//			
//			aspect.after(cancelButton,"onclick", function(){
//				style.set(okButton,"display","none");
//				style.set(cancelButton,"display","none");
//				window.setTimeout(function(){
//					if(callback){
//						try{
//							callback.cancel.apply(context);
//						}catch(e){
//							console.error("failed to execute callback",e);
//						}
//					}
//					dialog.hide();
//				},200);
//			});
//			
//			this.show();	
--]
		});
	}
[/@]